<template>
	<div class="module-box single-img">
		<div class="single-img__box">
			<el-upload drag :action="uploadApi" 
				:headers="uploadHeaders"
				:before-upload="onUploadBefore" 
				:on-success="onUploadSuccess"
				:show-file-list="false">
				<el-image v-if="imageUrl" :src="imageUrl" fit="contain" class="single-img__img"/>
				<i v-else-if="uploadLloading" class="el-icon-loading"></i>
				<i v-else class="el-icon-upload">
					<div class="el-upload__text"><em>选择图片</em></div>
					<div class="el-upload__tip">{{tip}}</div>
				</i>
			</el-upload>
			<div class="overlay" v-if="imageUrl">
				<i class="fa fa-trash-o mr10" aria-hidden="true" @click="onImageDelete"></i>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, } from 'vue';
	import { ElMessage } from 'element-plus';
	import { Session } from '/@/utils/storage';
	import { materialUploadApi } from '/@/api/dragdesign/material/index';
	export default {
		name: 'tool-single-img',
		props: {
			imageUrl: {
				type: String,
				default: ''
			},
			tip: {
				type: String,
				default: '建议尺寸: 16 : 9等比例图片, 高度自适应'
			}
		},
		setup(props, { emit }) {
			const state = reactive({
				uploadLloading: false,
				uploadApi: materialUploadApi(),
				uploadHeaders: { Authorization: `Bearer ${Session.get('token')}` }
			});
			
			const onUploadBefore = (file) => {
				const limitSize = file.size / 1024 / 1024 < 5
				if (!limitSize) {
					ElMessage.warning('上传图片大小不能超过5MB!')
				}
				//避免长时间等待token失效
				state.uploadHeaders = { Authorization: `Bearer ${Session.get('token')}` };
				state.uploadLloading = true;
				return limitSize;
			}
			
			const onUploadSuccess = (res) => {
				state.uploadLloading = false;
				emit('update:imageUrl', res.data.url);
			}
			
			const onImageDelete = () => {
				emit('update:imageUrl', '');
			}
			
			onMounted(() => {
				
			})
			
			return {
				onUploadBefore,
				onUploadSuccess,
				onImageDelete,
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.single-img {
		&__box {
			position: relative;

			:deep .el-upload {
				width: 100%;
			}

			:deep .el-upload-dragger {
				width: 100%;

				.el-upload__text {
					line-height: 40px;
				}

				.el-upload__tip {
					line-height: 1em;
				}
			}
			
			.el-icon-loading {
				margin: 55px 0 16px;
				line-height: 55px;
				font-size: 35px;
				color: var(--el-text-color-secondary);
			}

			.overlay {
				display: none;
			}

			&:hover .overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				color: #fff;
				display: flex;
				justify-content: right;
				align-items: baseline;

				i {
					padding: 5px;
					margin: 0 5px;
					font-size: 20px;
					cursor: pointer;
					color: var(--color-primary);
				}
			}
		}

		&__img {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
			margin: 0 auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
</style>
